<template>
  <div class="biaogejiatankuang">
    <el-table
      :data="tableData"
      header-align="center"
      class="customer-table"
      height="table"
      empty-text="暂无数据"
    >
      <el-table-column align="center" prop="name" label="姓名"> </el-table-column>

      <el-table-column align="center" label="性别">
        <template slot-scope="scope">
          <div>
            {{ scope.row.sex == 0 ? "男" : "女" }}
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="phone" label="联系方式"> </el-table-column>

      <el-table-column label="补助时间" align="center">
        <template slot-scope="scope">
          <div>
            {{ timezhuanhuan1(scope.row.applicationTime) }}
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="cause" label="补助原因">
      </el-table-column>
      <el-table-column align="center" prop="type.name" label="补助项">
      </el-table-column>
      <el-table-column align="center" prop="type.amount" label="补助金额(元)">
      </el-table-column>
      <el-table-column align="center" prop="type.items" label="补助物品">
      </el-table-column>
      <el-table-column align="center" prop="remarks" label="备注">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <div @click="chakantanchucheng(scope.row)" class="caozuoshoubiao">
            详情
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 点击查看的弹出层 -->

    <el-dialog title="提示" :visible.sync="chakanzhanshi" width="50%" center>
     <el-card class="box-card">
        <div slot="header" class="clearfix">{{tbdata.name}}</div>
        <div>
          <span>补助原因：   {{tbdata.cause}}</span>
        </div>
        <div><span>补助项：{{tbdata.name}}</span></div>
        <div><span>补助金额：{{tbdata.amount}}</span></div>
        <div><span>补助物品：{{tbdata.items}}</span></div>
        <div><span>备注：{{tbdata.remarks}}</span></div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="chakanzhanshi = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
var { timezhuanhuan1 } = require("../../js/global");
export default {
  props: ["biaogeqingqiucanshu", "fenyexinxi"],
  data() {
    return {
      tableData: [],
      // 点击查看应有的数据
      chakanzhanshi: false,
      tbdata:{},
    };
  },
  methods: {
    gengxin() {
      //更新表格
      this.huoqushuju();
    },
    huoqushuju() {
      let params = new URLSearchParams();
      params.append("page", this.fenyexinxi.currentPage);
      params.append("size", this.fenyexinxi.pagesize);
      params.append("personal", "0");
      params.append(
        "time",
        this.biaogeqingqiucanshu.selectshijian[0] +
          "~" +
          this.biaogeqingqiucanshu.selectshijian[1]
      );
      params.append("villageId", this.biaogeqingqiucanshu.selectcun);
      params.append("zhenId", this.biaogeqingqiucanshu.selectzhen);
      this.$axios
        .post("/Leader/village/subsityinfobacktable", params)
        .then((response) => {
          response.data.data.data.records.forEach((item, index) => {
            item.type = response.data.data.type[index];
          });
          this.tableData = response.data.data.data.records;
          // 设置数据total
          this.$emit("setfenyetotal", response.data.data.data.total);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 表格操作中的弹出层展示
    chakantanchucheng(row) {
      this.tbdata=row;
      this.chakanzhanshi = true;
    },
    timezhuanhuan1: timezhuanhuan1,
  },
  created() {},
};
</script>

<style lang="less" scoped>
.biaogejiatankuang {
  height: 100%;
}
.el-table {
  height: 100%;
}
.box-card {
  background-color: #051655;
  color: #fff;
}
</style>